<template>
  <div class="row">
      <!-- 展示用户列表 -->
      <div v-show="info.userList.length" class="card" v-for="users in info.userList" :key="users.login">
          <a :href="users.html_url" target="_blank">
              <img :src="users.avatar_url" style="width:100px"/>
          </a>
          <p class="card-text">{{users.login}}</p>
      </div>
      <!-- 展示欢迎语 -->
      <h2 v-show="info.isFirst">欢迎使用Search Github Users!</h2>
      <!-- 展示加载信息 -->
      <h2 v-show="info.isLoading">正在加载中...</h2>
      <!-- 展示错误信息 -->
      <h2 v-show="info.errMsg">{{info.errMsg}}</h2>
  </div>
</template>

<script>
    export default {
        name:'List',
        data(){
            return{
                info:{
                    isFirst:true,//是否第一次访问
                    isLoading:false,//是否加载中
                    errMsg:'',//错误信息
                    userList:[]
                }
            
            }
        },
        mounted(){
            // 通过全局事件总线拿到兄弟组件Search的数据
            this.$bus.$on('getUsers',(usersObj)=>{
                //把接收到的数据赋值给userList  
                //会发现如果Serch不写isFirst到最后vue开发者工具会没有这个属性，不让他丢的方法1：在search那边写上。 方法2：如下es6方法通过字面量形式合并对象
              this.info={...this.info,...usersObj}//把info数据和usersObj数据都摊在这，重名的以后面的为准
            })
        }
    }
</script>

<style>
   .album{
       min-height: 50rem;
       padding-top: 3rem;
       padding-bottom: 3rem;
       background-color: #f7f7f7;
   }
   .card{
       float: left;
       width: 33.33%;
       padding: .75rem;
       margin-bottom: 2rem;
       border: 1px solid #efefef;
       text-align: center;
   }
   .card > img{
       margin-bottom: .75rem;
       border-radius: 100px;
   }
   .card-text{
       font-size: 85%;
   }
</style>